<template>
    <MyNav />
    <div class="notice">
        <h1>ibox 公告</h1>
        <div class="container">
            <ul class="tabs-box">
                <li class="tab-item" v-for="(item, index) in tabList" :key="'tab' + item.key"
                    :class="{ active: currentTab === item.key }">
                    <div class="tab-name" @click="changeTab(item.key)">{{ item.label }}</div>
                    <div class="circle" v-if="!(index === tabList.length - 1)"></div>
                </li>
            </ul>
            <div class="tab-content">
                <div class="content-list">
                    <div class="title">{{ tabList.find(item => item.key === currentTab)?.label }}</div>
                    <div class="content">
                        <NoticeList :list-data="formatNotice(filterNoticeData(), 'datetime')" @more-notice-data="getMoreNoticeData" :is-load-all="isLoadAll"></NoticeList>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <MyFoot />
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import request from '../api/request';
import NoticeList from '../components/NoticeList.vue';
import MyNav from '../components/MyNav.vue';
import MyFoot from '../components/MyFoot.vue';

// tab标签数据接口约束
interface TabsType {
    key: string;
    label: string;
}
// 公告列表数据接口约束
interface NoticeDataType {
    id: number;
    tag: string;
    title: string;
    datetime: string;
}



// tab标签数组，用于渲染
const tabList = ref<TabsType[]>([
    {
        key: 'all',
        label: '全部'
    },
    {
        key: 'new',
        label: '上新公告'
    },
    {
        key: 'combine',
        label: '合成公告'
    },
    {
        key: 'clear',
        label: '澄清公告'
    },
    {
        key: 'air',
        label: '空投公告'
    },
    {
        key: 'sale',
        label: '寄售公告'
    },
    {
        key: 'station',
        label: '平台公告'
    },
    {
        key: 'history',
        label: 'iBox宇宙编年史'
    },
    {
        key: 'event',
        label: '活动公告'
    },
    {
        key: 'system',
        label: '系统公告'
    },
    {
        key: 'energy',
        label: '赋能公告'
    }
])

// 当前激活tab标签
const currentTab = ref('all')

// 公告列表数据
const noticeListData = ref<NoticeDataType[]>([])

// 当前页码，用于获取mock数据
const page = ref(1)
// 标识是否加载完所有数据
const isLoadAll = ref(false)

// 根据时间对数组重新排序
const formatNotice = (arr: NoticeDataType[], key: string) => {
    let newArr: NoticeDataType[] = arr.reduce((total, item: any) => {
        let index = total.findIndex((i: any) => new Date(i[key]).getTime() < new Date(item[key]).getTime())
        index > -1 ? total.splice(index, 0, item) : total.push(item)
        return total
    }, [] as NoticeDataType[])
    return newArr
}


onMounted(() => {
    getNoticeData()
})

// 获取mock数据的函数
const getNoticeData = async () => {
    if (isLoadAll.value) return
    let res: any = await request(`/api/notice?page=${page.value}`)
    noticeListData.value = [...noticeListData.value, ...res.data]
    page.value += 1
    if (page.value > 10) isLoadAll.value = true;
}

// 筛选后的公告列表数据
const filterNoticeData = () => {
    // 页数未达到上限则重置是否加载全部数据的标识
    if (page.value <= 10) isLoadAll.value = false
    
    let label = tabList.value.find(item => item.key === currentTab.value)?.label
    if (label === '全部') return noticeListData.value
    else {
        let arr = noticeListData.value.filter(item => item.tag === label)
        if (!arr.length) isLoadAll.value = true
        return arr
    }
}

// 获取新的公告数据
const getMoreNoticeData = () => {
    getNoticeData()
}

// 切换tab标签
const changeTab = (tabKey: string) => {
    currentTab.value = tabKey
}

</script>

<style lang='scss' scoped>
.notice {
    text-align: center;

    .container {
        min-width: 1200px;
        margin: 0 auto;
        margin-top: 23px;

        .tabs-box {
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: 300;
            color: #696873;
            margin-bottom: 40px;

            .tab-item {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .tab-name {
                    position: relative;
                    cursor: pointer;
                }

                .circle {
                    width: 4px;
                    height: 4px;
                    background: #abaab9;
                    border-radius: 50%;
                    margin: 0 20px;
                }
            }

            .tab-item.active {
                font-weight: 500;
                color: #2469e5;

                .tab-name::after {
                    content: "";
                    width: 100%;
                    position: absolute;
                    height: 2px;
                    background: #2469e5;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: -9px;
                }
            }
        }

        .tab-content {
            margin-top: 40px;

            .content-list {
                padding: 40px 50px 44px 50px;
                margin: 0 auto 128px;
                background: #fff;
                width: 1200px;
                box-sizing: border-box;

                .title {
                    font-weight: 500;
                    font-size: 30px;
                    color: #000;
                    margin-bottom: 20px;
                    text-align: left;
                }

                .content {
                    margin-top: 50px;
                }
            }
        }
    }
}
</style>